<template>
	<view class="login" :style="{
			backgroundColor: decorateData.backgroundColor,
			backgroundImage: `url(${decorateData.backgroundImage})`,
			background: `linear-gradient(${decorateData.gradientAngle}deg, ${decorateData.gradientBackgroundColor1}, ${decorateData.gradientBackgroundColor2})`,
			backgroundSize: 'cover',
			backgroundPosition: 'center',
			backgroundRepeat: 'no-repeat'
		}">
		<view class="container" :style="{
				paddingTop: `${decorateData.marginTop}px`
			}">
			<!-- 头部 -->
			<uv-image :src="decorateData.logo" :width="`${decorateData.logoWidth}px`" mode="scaleToFill"
				:height="`${decorateData.logoHeight}px`" class="login-header">
				<template v-slot:error>
					<view style="font-size: 24rpx">加载失败</view>
				</template>
			</uv-image>
			<!-- 登录方式切换 -->
			<uni-segmented-control :current="currentTab" :values="tabs" @clickItem="onClickTab" style-type="text"
				active-color="#2979ff"></uni-segmented-control>

			<!-- 账号密码登录 -->
			<AccountLogin v-if="currentTab === 0" @submit="handleAccountLogin" />

			<!-- 短信登录 -->
			<SmsLogin v-else-if="currentTab === 1" @submit="handleSmsLogin" @send-sms="sendSmsCode" />

			<!-- 邮箱登录 -->
			<EmailLogin v-else-if="currentTab === 2" @submit="handleEmailLogin" @send-email="sendEmailCode" />

			<!-- 第三方登录 -->
			<view class="third-login">
				<view class="divider">
					<view class="divider-line"></view>
					<text class="divider-text">其他登录方式</text>
					<view class="divider-line"></view>
				</view>
				<view class="third-icons">
					<view class="third-icon" @click="handleQQLogin">
						<uni-icons type="qq" size="30" color="#12b7f5"></uni-icons>
						<text class="icon-text">QQ</text>
					</view>
					<view class="third-icon" @click="handleWechatLogin">
						<uni-icons type="weixin" size="30" color="#07c160"></uni-icons>
						<text class="icon-text">微信</text>
					</view>
				</view>
			</view>

			<!-- 注册链接 -->
			<view class="register-link">
				<text>还没有账号？</text>
				<text class="register-text" @click="goRegister" :style="{ color: getTheme.themeColor }">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import AccountLogin from "./AccountLogin.vue";
	import SmsLogin from "./SmsLogin.vue";
	import EmailLogin from "./EmailLogin.vue";
	import { useAuthStore } from "@/stores/auth";
	const authStore = useAuthStore();
	const getTheme = authStore.getTheme();
	import { loginApi } from "@/api/index";
	import { onLoad } from "@dcloudio/uni-app";
	const tabs = ref(["账号密码", "短信登录", "邮箱登录"]);
	const currentTab = ref(0);
	const onClickTab = (e) => {
		currentTab.value = e.currentIndex;
	};

	const handleAccountLogin = (formData) => {
		uni.showToast({
			title: "账号密码登录提交",
			icon: "success"
		});
	};

	const handleSmsLogin = (formData) => {
		loginApi
			.sendcode(formData)
			.then((res) => {
				uni.showToast({
					icon: "success",
					title: res.data.message
				});
				uni.navigateTo({
					url: "/pages/home/home"
				});
			})
			.catch((err) => {
				uni.showToast({
					icon: "error",
					title: err.messsge
				});
			});
	};

	const handleEmailLogin = (formData) => {
		loginApi
			.sendcode(formData)
			.then((res) => {
				uni.showToast({
					icon: "success",
					title: res.data.message
				});
				uni.navigateTo({
					url: "/pages/home/home"
				});
			})
			.catch((err) => {
				uni.showToast({
					icon: "error",
					title: err.messsge
				});
			});
	};

	const sendSmsCode = (phone, callback) => {
		console.log("发送短信验证码到:", phone);
		setTimeout(() => {
			uni.showToast({
				title: "验证码已发送",
				icon: "success"
			});
			callback(); // 通知子组件发送成功
		}, 1000);
	};

	const sendEmailCode = (email, callback) => {
		console.log("发送邮箱验证码到:", email);
		setTimeout(() => {
			uni.showToast({
				title: "验证码已发送",
				icon: "success"
			});
			callback(); // 通知子组件发送成功
		}, 1000);
	};

	// #ifndef MP-WEIXIN
	const redirect_uri = { redirect_uri: window.location.href.split("?")[0] };
	// #endif

	const handleQQLogin = async () => {
		//qq登录
		await loginApi
			.getoauthurl(redirect_uri)
			.then((res) => {
				window.location.href = res.data.qq;
			})
			.catch((err) => {
				uni.showToast({
					icon: "error",
					title: err.message
				});
			});
	};

	const handleWechatLogin = async () => {
		await loginApi
			.getoauthurl(redirect_uri)
			.then((res) => {
				window.location.href = res.data.weixin;
			})
			.catch((err) => {
				uni.showToast({
					icon: "error",
					title: err.message
				});
			});
	};

	onLoad((options) => {
		if (options.code && options.type) {
			loginApi
				.oauthlogin({ type: options.type, code: options.code })
				.then((res) => {
					uni.navigateTo({
						url: "/pages/home/home"
					});
				})
				.catch((err) => {
					uni.showToast({
						title: err.message,
						icon: "error"
					});
				});
		}
	});

	const goRegister = () => {
		uni.navigateTo({
			url: "/pages/register/register"
		});
	};

	const decorateData = ref({
		logo: "https://mp-38ed5efe-91f3-4ddb-aa62-65f50d644974.cdn.bspapp.com/卡易乐 定稿_画板 1_副本.jpg",
		logoWidth: 125,
		logoHeight: 40,
		marginTop: 160,
		name: "登录/注册",
		img: new URL("/@/assets/images/userInfo.png", import.meta.url).href,
		backgroundImage: "",
		backgroundColor: "#fff",
		gradientBackgroundColor1: "",
		gradientBackgroundColor2: "",
		gradientAngle: 90
	});
</script>

<style lang="scss">
	.login {
		// width: 100vw;s
		height: 100vh;
		margin: 0 -2vw;
		padding: 0 4vw;

		.login-header {
			margin: 0 auto;
			margin-bottom: 30px;
		}

		.third-login {
			margin-top: 30px;
		}

		.divider {
			display: flex;
			align-items: center;
			margin-bottom: 20px;

			.divider-line {
				flex: 1;
				height: 1px;
				background-color: #dcdfe6;
			}

			.divider-text {
				padding: 0 15px;
				color: #909399;
				font-size: 14px;
			}
		}

		.third-icons {
			display: flex;
			justify-content: center;
			gap: 40px;
		}

		.third-icon {
			display: flex;
			flex-direction: column;
			align-items: center;
			cursor: pointer;

			.icon-text {
				margin-top: 5px;
				font-size: 12px;
				color: #606266;
			}
		}

		.register-link {
			text-align: center;
			margin-top: 20px;
			font-size: 14px;

			.register-text {
				margin-left: 5px;
			}
		}
	}
</style>